<template>
  <el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="handleClick">
    <el-tab-pane :key="'first'" label="化学品管理" name="first">

      <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <!-- 搜索 -->
            <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
            <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
              <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
            </el-select>
            <rrOperation :crud="crud" />

          </div>
          <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
          <!--<crudOperation :permission="permission" >-->
          <el-button
            slot="right"
            v-permission="['admin','chemiclaStockIn:add']"
            class="filter-item"
            size="mini"
            type="primary"
            @click="dialogFormVisible = true"
          >入库
          </el-button>

          <el-button
            slot="right"
            v-permission="['admin','chemiclaStockOut:add']"

            class="filter-item"
            size="mini"
            type="primary"
          >出库
          </el-button>

          <el-button
            slot="right"
            v-permission="['admin','chemiclaScrapDisposition:add']"

            class="filter-item"
            size="mini"
            type="primary"
          >报废
          </el-button>

          <!--</crudOperation>-->

          <!-- Form -->
          <!--<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->

          <!--<el-dialog title="收货地址" :visible.sync="dialogFormVisible">-->
          <!--<el-form :model="form">-->
          <!--<el-form-item label="活动名称" :label-width="formLabelWidth">-->
          <!--<el-input v-model="form.name" autocomplete="off"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="活动区域" :label-width="formLabelWidth">-->
          <!--<el-select v-model="form.region" placeholder="请选择活动区域">-->
          <!--<el-option label="区域一" value="shanghai"></el-option>-->
          <!--<el-option label="区域二" value="beijing"></el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <!--</el-form>-->
          <!--<div slot="footer" class="dialog-footer">-->
          <!--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
          <!--<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
          <!--</div>-->
          <!--</el-dialog>-->

          <!--<el-dialog :append-to-body="true" :modal-append-to-body="false" :before-close="crud.cancelCU" title="入库" :visible.sync="dialogFormVisible" >-->
          <!--<el-form :model="form">-->
          <!--<el-form-item label="化学品选择" >-->
          <!--<el-input v-model="form.chemiclaId" autocomplete="off"></el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="入库量" >-->
          <!--<el-input v-model="form.stockInCount" autocomplete="off"></el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="审核人" >-->
          <!--<el-input v-model="form.auditId" autocomplete="off"></el-input>-->
          <!--</el-form-item>-->

          <!--</el-form>-->
          <!--<div slot="footer" class="dialog-footer">-->
          <!--<el-button type="text" @click="crud.cancelCU">取消</el-button>-->
          <!--<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>-->
          <!--</div>-->
          <!--</el-dialog>-->

          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="chemicalsCn" label="化学品中文名称" />
            <el-table-column prop="chemicalsEn" label="化学品英文名称" />
            <el-table-column prop="chemicalsAlias" label="化学品别名" />
            <el-table-column prop="chemicalsCas" label="cas" />
            <el-table-column prop="chemicalsType" label="化学品类别">
              <template slot-scope="scope">
                {{ dict.label.chemicla_type[scope.row.chemicalsType] }}
              </template>
            </el-table-column>
            <!--<el-table-column prop="chemicalsMsds" label="化学品文件" />-->
            <!--<el-table-column prop="supplierName" label="供应商名称" />-->
            <!--<el-table-column prop="supplierContactName" label="供应商联系人" />-->
            <!--<el-table-column prop="supplierContactPhone" label="供应商联系方式" />-->
            <!--<el-table-column prop="emConsultantName" label="咨询单位名称" />-->
            <!--<el-table-column prop="emContactName" label="应急联系人" />-->
            <!--<el-table-column prop="emContactPhone" label="应急联系方式" />-->
            <!--<el-table-column prop="storageArea" label="仓库区域" />-->
            <el-table-column prop="useAreaName" label="使用区域" />
            <el-table-column prop="stockCount" label="实时库存" />
            <!--<el-table-column prop="dangerousCategory" label="危险类型" />-->
            <!--<el-table-column prop="registrationNo" label="登记号" />-->
            <!--<el-table-column prop="packingCategory" label="包装类别" />-->
            <!--<el-table-column prop="hazardCharacteristics" label="危险特性" />-->
            <!--<el-table-column prop="activeHazard" label="活性危害" />-->
            <!--<el-table-column prop="prevention" label="预防及应急措施-->
            <!--" />-->
            <!--<el-table-column prop="hazardNo" label="危规号" />-->
            <!--<el-table-column prop="incompatibility" label="禁配物" />-->

            <el-table-column v-permission="['admin','chemicla:edit','chemicla:del']" label="操作" width="150px" align="center">
              <template slot-scope="scope">
                <udOperation
                  :data="scope.row"
                  :permission="permission"
                />
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </div>
      </div>
    </el-tab-pane>

    <el-tab-pane :key="'second'" label="化学品档案" name="second">
      <record />
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import crudChemicla from '@/api/psp/chemicla/chemicla'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import rk from './rk'
import record from './record'

const defaultForm = { id: null, createTime: null, updateTime: null, createBy: null, updateBy: null, chemicalsCn: null, chemicalsEn: null, chemicalsAlias: null, chemicalsCas: null, chemicalsType: null, chemicalsMsds: null, supplierName: null, supplierContactName: null, supplierContactPhone: null, emConsultantName: null, emContactName: null, emContactPhone: null, storageArea: null, useArea: null, isDangerousGood: null, dangerousCategory: null, registrationNo: null, packingCategory: null, hazardCharacteristics: null, activeHazard: null, prevention: null, hazardNo: null, incompatibility: null }
export default {
  name: 'Chemicla',
  components: { record, rk, pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['chemicla_type'],
  cruds() {
    return CRUD({ title: '化学品管理', url: 'api/chemicla', sort: 'id,desc', crudMethod: { ...crudChemicla }})
  },
  data() {
    return {
      activeName: 'first',
      permission: {
        add: ['admin', 'chemicla:add'],
        edit: ['admin', 'chemicla:edit'],
        del: ['admin', 'chemicla:del']
      },
      rules: {
        chemicalsCn: [
          { required: true, message: '化学品中文名称不能为空', trigger: 'blur' }
        ],
        chemicalsType: [
          { required: true, message: '化学品类别不能为空', trigger: 'blur' }
        ],
        supplierName: [
          { required: true, message: '供应商名称不能为空', trigger: 'blur' }
        ],
        supplierContactName: [
          { required: true, message: '供应商联系人不能为空', trigger: 'blur' }
        ],
        supplierContactPhone: [
          { required: true, message: '供应商联系方式不能为空', trigger: 'blur' }
        ],
        emConsultantName: [
          { required: true, message: '咨询单位名称不能为空', trigger: 'blur' }
        ],
        emContactName: [
          { required: true, message: '应急联系人不能为空', trigger: 'blur' }
        ],
        emContactPhone: [
          { required: true, message: '应急联系方式不能为空', trigger: 'blur' }
        ],
        storageArea: [
          { required: true, message: '仓库区域不能为空', trigger: 'blur' }
        ],
        useArea: [
          { required: true, message: '使用区域不能为空', trigger: 'blur' }
        ],
        isDangerousGood: [
          { required: true, message: '是否是危险品不能为空', trigger: 'blur' }
        ],
        dangerousCategory: [
          { required: true, message: '危险类型不能为空', trigger: 'blur' }
        ],
        registrationNo: [
          { required: true, message: '登记号不能为空', trigger: 'blur' }
        ],
        packingCategory: [
          { required: true, message: '包装类别不能为空', trigger: 'blur' }
        ],
        hazardNo: [
          { required: true, message: '危规号不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'chemicalsCn', display_name: '化学品中文名称' },
        { key: 'chemicalsEn', display_name: '化学品英文名称' },
        { key: 'chemicalsAlias', display_name: '化学品别名' },
        { key: 'chemicalsType', display_name: '化学品类别' },
        { key: 'storageArea', display_name: '仓库区域' },
        { key: 'isDangerousGood', display_name: '是否是危险品' },
        { key: 'dangerousCategory', display_name: '危险类型' },
        { key: 'registrationNo', display_name: '登记号' },
        { key: 'packingCategory', display_name: '包装类别' },
        { key: 'hazardNo', display_name: '危规号' }
      ]
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const query = this.query
      if (query.type && query.value) {
        this.crud.params[query.type] = query.value
      }
      return true
    }, rk() {
      this.$refs.rk.dialog = true
      this.$refs.rk.deployInfo = this.currentRow
    },
    handleClick(tab) {
      if (tab.name === 'first') {
        // alert("aaa");
        // this.$forceUpdate();
        this.$router.go(0)
        // this.reload();
      } else if (tab.name === 'second') {
        this.isChildUpdate1 = false
        this.isChildUpdate2 = true
      }
    }
  }
}
</script>

<style scoped>

</style>
